<template>
	<view class="bg">
		<xl-navbar title="Icon 图标" fixed shadow></xl-navbar>
		<view class="content">
			<view class="title">基础样式</view>
			<xl-icon name="xl-home"></xl-icon>
			
			<view class="title">图标大小、颜色、粗体</view>
			<xl-icon name="xl-home" size="20" color="#0a93ff" bold></xl-icon>
			
			<view class="title">上、左、右边距</view>
			<xl-icon name="xl-home" size="20" right="20"></xl-icon>
			<xl-icon name="xl-home" size="20" top="10"></xl-icon>
			<xl-icon name="xl-home" size="20" left="20" right="20"></xl-icon>
			<xl-icon name="xl-home" size="20" top="-10"></xl-icon>
			
			<view class="title">使用unicode</view>
			<xl-icon unicode="&#xe60f;"></xl-icon>
			
			<view class="title">自定义图标库：使用family属性</view>
			<xl-icon family="xl-uni" name="xl-uni-tabs"></xl-icon>
			
			<view class="title">使用unicode</view>
			<view class="flex-between flex-wrap">
				<view v-for="(item,index) in iconClasses" :key="index" class="flex-center-column icon">
					<xl-icon :name="item" size="20"></xl-icon>
					<view class="text">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const iconClasses = ref(['xl-pause', 'xl-liuliang', 'xl-bofang', 'xl-shezhi', 'xl-fabu', 'xl-yaoqing', 'xl-product', 'xl-shangjiarenzheng', 'xl-shangpin', 'xl-tongji', 'xl-tiku', 'xl-company', 'xl-wenda', 'xl-daohang', 'xl-jiahao', 'xl-jianhao', 'xl-shangcheng', 'xl-lipin', 'xl-shouhou', 'xl-qianbao', 'xl-collect', 'xl-daifukuan', 'xl-daishouhuo', 'xl-daipingjia', 'xl-shangjiaruzhu', 'xl-daifahuo', 'xl-zhangdan', 'xl-cart', 'xl-up-bold', 'xl-down-bold-copy', 'xl-up1', 'xl-down1', 'xl-shenfenzheng', 'xl-camera', 'xl-add', 'xl-dizhi', 'xl-dingwei', 'xl-footprint', 'xl-fenlei', 'xl-xiaoxi', 'xl-ditu', 'xl-scan', 'xl-qrcode', 'xl-back-top', 'xl-phone', 'xl-time', 'xl-yijian', 'xl-search', 'xl-yes', 'xl-dingyue', 'xl-kuaijin', 'xl-kuaitui', 'xl-beisu', 'xl-bili', 'xl-touying', 'xl-quanping', 'xl-liebiao', 'xl-tuichuquanping', 'xl-play', 'xl-redo', 'xl-undo', 'xl-text', 'xl-code', 'xl-shangyibu', 'xl-xiayibu', 'xl-save', 'xl-del', 'xl-weibiaoti2fuzhi13', 'xl-yiguoqi', 'xl-yishiyong', 'xl-hot-o', 'xl-hot-fill', 'xl-msg', 'xl-share-link', 'xl-vip', 'xl-weixin', 'xl-calendar', 'xl-my', 'xl-like', 'xl-news', 'xl-dianzan', 'xl-dianzan-fill', 'xl-success', 'xl-up-fill', 'xl-video', 'xl-plus', 'xl-check', 'xl-show', 'xl-star', 'xl-star-filled', 'xl-tel', 'xl-share', 'xl-cai', 'xl-about', 'xl-down', 'xl-pass', 'xl-hide', 'xl-edit', 'xl-img', 'xl-type','xl-close-filled', 'xl-loading', 'xl-heart', 'xl-heart-filled', 'xl-new', 'xl-aixin', 'xl-aixin-fill', 'xl-hot', 'xl-link', 'xl-left', 'xl-close-round', 'xl-yes-fill', 'xl-detail', 'xl-setting', 'xl-close', 'xl-shoucangjia', 'xl-right', 'xl-up', 'xl-home', 'xl-category', 'xl-kefu', 'xl-notice'])
	onMounted(async ()=>{
		// #ifndef MP-WEIXIN
		const response = await fetch('https://at.alicdn.com/t/c/font_3676216_v026u4fb2v.css');
		const cssContent = await response.text();
		
		// 提取所有图标类名
		const matches = [...cssContent.matchAll(/\.([a-zA-Z0-9-]+):before\s*{/g)];
		iconClasses.value = matches.map(match => match[1]);
		
		console.log(matches.map(match => match[1]).slice(99));
		// #endif
	})
</script>

<style lang="scss" scoped>
	.icon{
		width: 150rpx;
		height: 150rpx;
		.text{
			margin-top: 20rpx;
			text-align: center;
			font-size: 24rpx;
		}
	}
</style>